<template>
	<el-form :inline="true" :model="form" class="demo-form-inline">
  <el-form-item label="系统编码">
  	<el-select v-model="form.syscode" clearable placeholder="请选择">
    <el-option
      v-for="item in options"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  </el-form-item>
  <el-form-item label="系统名称">
    <el-input v-model="form.sysname" placeholder="系统名称"></el-input>
  </el-form-item>
  </el-form-item><el-form-item>
    <el-button type="primary" @click="onSubmit" icon="search">查询</el-button>
    <el-button type="primary" @click="dialogFormVisible = true" icon="plus">新增</el-button>
    <el-button type="primary" @click="updateDialog = true" icon="edit">修改</el-button>
    <el-button type="danger" @click="onDelete" icon="delete">删除</el-button>
    <!--<el-button type="primary" @click="onDelete" icon="caret-right">生成QTP脚本</el-button>
    <el-button type="primary" @click="onDelete" icon="caret-right">生成Selenium脚本</el-button>-->
    <el-button type="primary" @click="exportCase = true">下载脚本</el-button>
  </el-form-item>
  <!--新增-->
  <el-dialog title="新增系统" v-model="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="系统编码：" :label-width="formLabelWidth">
<!--      <el-input v-model="form.name" auto-complete="off"></el-input>
-->     <el-select v-model="form.syscode" placeholder="请选择系统编码">
        <el-option label="CCP" value="CCP"></el-option>
        <el-option label="EBIL" value="EBIL"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="系统名称：" :label-width="formLabelWidth">
       <el-input v-model="form.sysname" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="版本号：" :label-width="formLabelWidth">
      <el-input v-model="form.vserion" auto-complete="off"></el-input>
     </el-form-item>
    <el-form-item label="模块数量：" :label-width="formLabelWidth">
      <el-input v-model="form.casecount" auto-complete="off"></el-input>
     </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">保存</el-button>
  </div>
</el-dialog>
 <!--修改-->
  <el-dialog title="修改模块" v-model="updateDialog">
  <el-form :model="form">
    <el-form-item label="系统编码：" :label-width="formLabelWidth">
<!--      <el-input v-model="form.name" auto-complete="off"></el-input>
-->     <el-select v-model="form.syscode" placeholder="请选择系统编码">
        <el-option label="CCP" value="CCP"></el-option>
        <el-option label="EBIL" value="EBIL"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="系统名称：" :label-width="formLabelWidth">
       <el-input v-model="form.sysname" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="版本号：" :label-width="formLabelWidth">
      <el-input v-model="form.vserion" auto-complete="off"></el-input>
     </el-form-item>
    <el-form-item label="模块数量：" :label-width="formLabelWidth">
      <el-input v-model="form.casecount" auto-complete="off"></el-input>
     </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="updateDialog = false">取 消</el-button>
    <el-button type="primary" @click="updateDialog = false">保存</el-button>
  </div>
</el-dialog>
<!--导出-->
 <el-dialog title="提示" v-model="exportCase" size="tiny">
  <span>确认导出该数据吗？</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="exportCase = false">取 消</el-button>
    <el-button type="primary" @click="exportCase = false">确 定</el-button>
  </span>
</el-dialog>
<!--结果展示-->
 <el-table
    :data="tableData"
    border
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
</el-table-column>
<el-table-column
        prop="sysCode"
        label="系统编码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="sysName"
        label="系统名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="version"
        label="版本号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="casecount"
        label="模块数量"
        width="180">
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建人"
        width="180">
      </el-table-column>
      <el-table-column
      fixed="right"
      label="操作"
      >
      <template scope="scope">
      	<el-row :gutter="20">
        <el-button @click="addTab" type="text" size="small">编辑模块</el-button>
        </el-row>
      </template>
    </el-table-column>
    </el-table>

 <div class="block">
  <span class="demonstration"></span>
  <el-pagination
    layout="prev, pager, next"
    :total="50">
  </el-pagination>
</div>
</el-form>

</template>

<script>
	import testjson from "../../../static/module/systemList.json";
	export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: 'CCP'
        }],
        editableTabsValue2: '2',
        editableTabs2: [{
          title: 'Tab 1',
          name: '1',
          content: 'Tab 1 content'
        }],
        dialogFormVisible: false,
        uploadDialogForm: false,
        exportCase:false,
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
        updateDialog: false,
        labelPosition: 'right',
        tableData: testjson,
        form: {
          syscode: '',
          sysname: '',
          vserion: '',
          casecount: ''
        },
        formLabelWidth: '120px'
      }
    },
    
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      addTab(){
      	this.$emit("page",'模块页面','modelPage');
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      onDelete(){
      	 this.$confirm('确认删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
  }
</script>